var carousel = document.querySelector('.carousel')
var ul = carousel.querySelector('.carousel ul')
var ol = carousel.querySelector('.carousel ol')
var leftBtn = carousel.querySelector('.carousel>a.leftBtn')
var rightBtn = carousel.querySelector('.carousel>a.rightBtn')
// 处理ol - 根据ul中li的个数创建ol中的li
for(var i=0;i<ul.children.length;i++){
    var li = document.createElement('li')
    if(i === 0){
        li.className = 'active';
    }
    ol.appendChild(li)
}
// 处理ul - 前后各复制一个元素，分别放到ul的后面和前面，设置ul的width和left
var firstLi = ul.firstElementChild.cloneNode(true)
var lastLi = ul.lastElementChild.cloneNode(true)
ul.appendChild(firstLi)
ul.insertBefore(lastLi,ul.firstElementChild)
ul.style.width = firstLi.offsetWidth * ul.children.length + "px";
ul.style.left = -firstLi.offsetWidth + "px"
// 定义下标
var index = 1;
// 定义开关
var flag = true
// 定义定时器变量
var timerId;
// 右按钮点击
rightBtn.onclick = function(){
    if(!flag) return false;
    flag = false
    index++;
    move(ul,{
        left:-index * firstLi.offsetWidth
    },function(){
        // 对index限定
        if(index===ul.children.length-1){
            index = 1
            ul.style.left = -index * firstLi.offsetWidth + "px"
        }
        // 让所有ol中的li的active去掉
        for(var i=0;i<ol.children.length;i++){
            ol.children[i].className = '';
        }
        ol.children[index-1].className = 'active'
        flag = true
    })
    return false;
}
// 左按钮点击
leftBtn.onclick = function(){
    if(!flag) return false;
    flag = false
    index--;
    move(ul,{
        left:-index * firstLi.offsetWidth
    },function(){
        // 对index限定
        if(index===0){
            index = ul.children.length-2
            ul.style.left = -index * firstLi.offsetWidth + "px"
        }
        // 让所有ol中的li的active去掉
        for(var i=0;i<ol.children.length;i++){
            ol.children[i].className = '';
        }
        ol.children[index-1].className = 'active'
        flag = true
    })
    return false;
}
// 小圆点的点击
for(let i=0;i<ol.children.length;i++){
    ol.children[i].onclick = function(){
        if(!flag) return false;
        flag = false;
        index = i+1
        move(ul,{
            left:-index * firstLi.offsetWidth
        },function(){
            // 对index限定
            if(index===0){
                index = ul.children.length-2
                ul.style.left = -index * firstLi.offsetWidth + "px"
            }
            // 让所有ol中的li的active去掉
            for(var i=0;i<ol.children.length;i++){
                ol.children[i].className = '';
            }
            ol.children[index-1].className = 'active'
            flag = true
        })
    }
}
// 自动轮播
timerId = setInterval(function(){
    if(!flag) return false;
    flag = false
    index++;
    move(ul,{
        left:-index * firstLi.offsetWidth
    },function(){
        // 对index限定
        if(index===ul.children.length-1){
            index = 1
            ul.style.left = -index * firstLi.offsetWidth + "px"
        }
        // 让所有ol中的li的active去掉
        for(var i=0;i<ol.children.length;i++){
            ol.children[i].className = '';
        }
        ol.children[index-1].className = 'active'
        flag = true
    })
},5000)
// 移入停止移出继续
carousel.onmouseover = function(){
    clearInterval(timerId)
}
carousel.onmouseout = function(){
    timerId = setInterval(function(){
        if(!flag) return false;
        flag = false
        index++;
        move(ul,{
            left:-index * firstLi.offsetWidth
        },function(){
            // 对index限定
            if(index===ul.children.length-1){
                index = 1
                ul.style.left = -index * firstLi.offsetWidth + "px"
            }
            // 让所有ol中的li的active去掉
            for(var i=0;i<ol.children.length;i++){
                ol.children[i].className = '';
            }
            ol.children[index-1].className = 'active'
            flag = true
        })
    },5000)
}


// 运动函数
function move(ele,obj,fn){
    let k=0,n=0;
    for(let attr in obj){
        k++
        let timerId = setInterval(function(){
            let target = obj[attr]
            let currentStyle = getStyle(ele,attr)
            if(attr === 'opacity'){
                target *= 100
                currentStyle *= 100
            }
            currentStyle = parseInt(currentStyle)
            let percent = (target - currentStyle)/20
            if(percent>0){
                percent = Math.ceil(percent)
            }else{
                percent = Math.floor(percent)
            }
            currentStyle += percent
            if(currentStyle === target){
                clearInterval(timerId)
                n++
                if(attr === 'opacity'){
                    ele.style[attr] = currentStyle / 100
                }else{
                    ele.style[attr] = currentStyle + "px"
                }
                currentStyle = target
                if(n === k){
                    fn()
                }
            }else{
                if(attr === 'opacity'){
                    ele.style[attr] = currentStyle / 100
                }else{
                    ele.style[attr] = currentStyle + "px"
                }
            }
        })
    }
}
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return getComputedStyle(ele)[attr]
    }else{
        return ele.currentStyle[attr]
    }
}